<!DOCTYPE html>
<html>
<head>
    <title>温度详情 - {{ date }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
    <style>
        .chart-container {
            margin-bottom: 30px;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 5px;
        }
        .chart-title {
            text-align: center;
            margin-bottom: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1 class="mb-4">温度详情 - {{ date }}</h1>
        <a href="/" class="btn btn-primary mb-4" style="background-color: #0d6efd; color: white; border: none;">
            <i class="fas fa-arrow-left"></i> 返回列表
        </a>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
        
        <script>
            // 预加载首页内容
            window.addEventListener('load', function() {
                fetch('/')
                    .then(response => response.text())
                    .then(html => {
                        // 创建隐藏的div存储预加载内容
                        const preloadDiv = document.createElement('div');
                        preloadDiv.style.display = 'none';
                        preloadDiv.innerHTML = html;
                        document.body.appendChild(preloadDiv);
                    });
            });
        </script>
        
        {% for camera_id, temps in cameras.items() %}
        <div class="chart-container">
            <div class="chart-title">{{ camera_id }}</div>
            <canvas id="chart-{{ camera_id }}" height="150"></canvas>
        </div>
        
        <script>
            const ctx{{ camera_id }} = document.getElementById('chart-{{ camera_id }}').getContext('2d');
            const chart{{ camera_id }} = new Chart(ctx{{ camera_id }}, {
                type: 'line',
                data: {
                    labels: {{ temps | map(attribute='time') | list | tojson }},
                    datasets: [
                        {
                            label: '设置温度 (TEMPSET)',
                            data: {{ temps | map(attribute='TEMPSET') | list | tojson }},
                            borderColor: 'rgb(75, 192, 192)',
                            tension: 0.1
                        },
                        {
                            label: '实际温度 (TEMPACT)',
                            data: {{ temps | map(attribute='TEMPACT') | list | tojson }},
                            borderColor: 'rgb(255, 99, 132)',
                            tension: 0.1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: '温度 (°C)'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '时间'
                            }
                        }
                    }
                }
            });
        </script>
        {% endfor %}
    </div>
</body>
</html>